<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>会员注册</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: #f5f5f5;
    }
    .form-container {
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      max-width: 500px;
      margin: auto;
    }
    /* 标题左对齐 */
    .form-section-title {
        color: blue;
        text-align: left;
        margin-bottom: 20px;
        margin-left: 10px;
    }

    /* 表单组通用样式 */
    .form-group {
      margin-bottom: 15px;
      display: flex;
      align-items: center;
    }
    .form-group label {
      width: 80px;
      text-align: right;
      margin-right: 10px;
      flex-shrink: 0;
    }
    .standard-width {
        width: 200px;
        box-sizing: border-box;
    }
    input[type="text"], input[type="password"], input[type="email"],
    select:not(#province-select), textarea, #captchaInput {
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    input[type="file"] {
        width: 200px;
    }

    /* 验证码区域 */
    .captcha-container {
        display: flex;
        align-items: center;
    }
    #captchaCanvas {
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 60px;
        height: 30px;
        cursor: pointer;
        margin-left: 10px;
        flex-shrink: 0;
        background-color: #ffffff;
    }
    #refreshBtn {
      padding: 5px 10px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-left: 10px;
      flex-shrink: 0;
    }
    #refreshBtn:hover {
      background-color: #0056b3;
    }

    /* 滑块 */
    #score {
      width: 200px;
      vertical-align: middle;
    }
    #msg {
      margin-left: 10px;
    }

    /* 性别单选 */
    .radio-group {
        display: flex;
        width: 200px;
        align-items: center;
    }
    .radio-item {
        display: flex;
        align-items: center;
        margin-right: 15px;
    }
    .radio-item input[type="radio"] {
        width: auto;
    }
    .radio-item label {
        width: auto;
        text-align: left;
        margin: 0 0 0 5px;
    }

    /* 籍贯下拉 */
    .select-group {
        display: flex;
        width: 200px;
        align-items: center;
    }
    /* 省份选择框宽度自适应 */
    #province-select {
        width: auto;
        min-width: 80px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }
    #city-select {
        flex: 1;
        margin-left: 10px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    /* 爱好复选 */
    .checkbox-group {
        width: 200px;
        display: flex;
        flex-wrap: wrap;
    }
    .checkbox-item {
        display: flex;
        align-items: center;
        width: 33%;
        margin-bottom: 5px;
    }
    .checkbox-item input[type="checkbox"] {
        width: auto;
    }
    .checkbox-item label {
        width: auto;
        text-align: left;
        margin: 0 0 0 5px;
    }

    /* 按钮区 */
    .form-actions {
        text-align: center;
        margin-top: 20px;
    }
    input[type="submit"], input[type="reset"] {
      padding: 8px 16px;
      margin-right: 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    input[type="submit"] {
      background-color: #28a745;
      color: white;
    }
    input[type="reset"] {
      background-color: #6c757d;
      color: white;
    }
    .required {
      color: red;
      margin-left: 5px;
    }
  </style>
</head>
<body>
  <div class="form-container">
    <div class="form-section-title">欢迎注册会员</div>
    <form action="#" id="registrationForm">
      <div class="form-group">
        <label for="phone">手机号码：</label>
        <input type="text" id="phone" name="phone" placeholder="11位手机号" class="standard-width" required>
        <span class="required">必填</span>
      </div>
      <div class="form-group">
        <label for="password">创建密码：</label>
        <input type="password" id="password" name="password" placeholder="8位密码" class="standard-width" required>
        <span class="required">必填</span>
      </div>
      <div class="form-group">
        <label for="email">注册邮箱：</label>
        <input type="email" id="email" name="email" placeholder="例如:wustzz@sina.com" class="standard-width" required>
        <span class="required">必填</span>
      </div>
      <div class="form-group">
        <label for="captchaInput">验证码：</label>
        <div class="captcha-container">
          <input type="text" id="captchaInput" name="captcha" placeholder="验证码" maxlength="4" class="standard-width" required>
          <canvas id="captchaCanvas" width="60" height="30"></canvas>
          <button type="button" id="refreshBtn">刷新</button>
        </div>
      </div>
      <div class="form-group">
        <label>性别：</label>
        <div class="radio-group">
            <div class="radio-item">
                <input type="radio" id="male" name="gender" value="male">
                <label for="male">男</label>
            </div>
            <div class="radio-item">
                <input type="radio" id="female" name="gender" value="female">
                <label for="female">女</label>
            </div>
        </div>
      </div>
      <div class="form-group">
        <label>籍贯：</label>
        <div class="select-group">
            <select name="province" id="province-select">
              <option value="guangdong">广东省</option>
              <option value="hunan">湖南省</option>
              <option value="hubei" selected>湖北省</option>
            </select>
            <select name="city" id="city-select">
              <option value="guangzhou">广州</option>
              <option value="shenzhen">深圳</option>
              <option value="wuhan" selected>武汉</option>
            </select>
        </div>
      </div>
      <div class="form-group">
        <label for="education">个人学历：</label>
        <select id="education" name="education" class="standard-width">
          <option value="junior">初中</option>
          <option value="senior">高中</option>
          <option value="bachelor" selected>本科</option>
          <option value="master">硕士</option>
          <option value="doctor">博士</option>
        </select>
      </div>
      <div class="form-group">
        <label for="score">月薪：</label>
        <input type="range" id="score" name="salary" min="0" max="10000" step="100" value="5000">
        <span id="msg">5000</span>
      </div>
      <div class="form-group">
        <label>个人爱好：</label>
        <div class="checkbox-group">
            <div class="checkbox-item">
                <input type="checkbox" id="sing" name="hobbies" value="sing">
                <label for="sing">唱歌</label>
            </div>
            <div class="checkbox-item">
                <input type="checkbox" id="run" name="hobbies" value="run">
                <label for="run">跑步</label>
            </div>
            <div class="checkbox-item">
                <input type="checkbox" id="swim" name="hobbies" value="swim">
                <label for="swim">游泳</label>
            </div>
        </div>
      </div>
      <div class="form-group">
        <label for="photo">个人照片：</label>
        <input type="file" id="photo" name="photo" multiple class="standard-width">
      </div>
      <div class="form-group">
        <label for="bio">个人简介：</label>
        <textarea id="bio" name="bio" cols="30" rows="5" class="standard-width"></textarea>
      </div>
      <div class="form-actions">
        <input type="submit" value="提交">
        <input type="reset" value="重置" id="resetBtn">
      </div>
    </form>
  </div>

  <script>
    // 月薪滑块
    const scoreSlider = document.getElementById("score");
    const salaryDisplay = document.getElementById("msg");
    function updateSalaryDisplay() {
        salaryDisplay.textContent = scoreSlider.value;
    }
    window.addEventListener('load', updateSalaryDisplay);
    scoreSlider.addEventListener('input', updateSalaryDisplay);

    // 验证码
    function generateCaptcha() {
        const chars = 'ABCDEFGHJKMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789';
        let captcha = '';
        for (let i = 0; i < 4; i++) {
            captcha += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        return captcha;
    }
    function drawCaptcha(captchaText) {
        const canvas = document.getElementById('captchaCanvas');
        if (!canvas) return;
        const ctx = canvas.getContext('2d');
        if (!ctx) return;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        // 斜体验证码
        ctx.font = 'italic bold 18px Arial';
        ctx.fillStyle = '#000000';
        ctx.textBaseline = 'middle';
        const textWidth = ctx.measureText(captchaText).width;
        const x = (canvas.width - textWidth) / 2;
        const y = canvas.height / 2;
        ctx.fillText(captchaText, x, y);
    }
    let currentCaptcha = generateCaptcha();
    drawCaptcha(currentCaptcha);
    function refreshCaptcha() {
        currentCaptcha = generateCaptcha();
        drawCaptcha(currentCaptcha);
        const captchaInput = document.getElementById('captchaInput');
        if (captchaInput) {
            captchaInput.value = '';
            captchaInput.focus();
        }
    }
    document.getElementById('refreshBtn')?.addEventListener('click', refreshCaptcha);
    document.getElementById('captchaCanvas')?.addEventListener('click', refreshCaptcha);
    document.getElementById('registrationForm')?.addEventListener('submit', function(event) {
        const userInput = document.getElementById('captchaInput').value.trim();
        if (userInput.toLowerCase() !== currentCaptcha.toLowerCase()) {
            alert('验证码错误，请重新输入！');
            event.preventDefault();
            refreshCaptcha();
            document.getElementById('captchaInput').value = '';
            document.getElementById('captchaInput').focus();
        }
    });

    // 重置按钮联动
    document.getElementById('resetBtn')?.addEventListener('click', function() {
        setTimeout(() => {
             refreshCaptcha();
             updateSalaryDisplay();
        }, 0);
    });
   </script>
</body>
</html>



